<template>
  <div class="appointments">
    <nav-top title="我的订单" :goback="false"></nav-top>
    <div class="top-tag" v-show="false">
      <ul>
        <li
          v-for="(item,index) in tabs"
          @click="changeTab(index)"
          :class="{'li-active':index===atviveIndex}"
          :key="index"
        >
          <span v-html="item.name"></span>
        </li>
      </ul>
    </div>
    <img
      v-if="appointments.count == 0"
      class="appointments-empty"
      src="/static/icon/appointment/appointments-empty.png"
    />
    <div v-else class="appointment-list">
      <div class="appointmnet-item" v-for="(item,index) in orderList" :key="index">
        <!--<p class="update-time" v-html="item.UpdatedAt.substring(0,10)+' '+item.UpdatedAt.substring(11,19)" />-->
        <div class="item-info">
          <div  @click="orderinfo(item.order_no)">
            <img class="product-img" :src="item.img" />
            <div class="product-info">
              <p class="product-name" v-html="item.body" />
              <div class="product-sum" v-show="true">
                <span>{{ item.UpdatedAt.substring(0,10)+' '+item.UpdatedAt.substring(11,19) }}</span>
                <!--<span v-html="item.total_fee/100" />-->
              </div>
              <p class="appointment-time" v-html="item.appointmentsTime" />
            </div>
            <img class="status-icon" :src="getStatusImg(item.status)" />
          </div>
          <div style="clear: both;">
            <div class="order-number">
              <span class="label">订单编号：</span>
              <span class="value" v-html="item.order_no" />
            </div>
            <div class="pay-sum">
              <span class="label">支付费用：</span>
              <span class="value">￥</span>
              <span class="value" v-html="item.total_fee/100" />
            </div>
            <div class="action" v-if="item.status === 3" style="">
              <div class="action-line"></div>
              <van-button class="comment-btn" type="success">已取消</van-button>
              <!--<van-button class="close-btn" type="default" @click="close(item.id)">取消预约</van-button>-->
            </div>
            <div class="action" v-else-if="item.status === 999"> <!-- 改签（仅一次） -->>
              <div class="action-line"></div>
              <van-button class="change-btn" type="success" @click="orderDo(item.order_no,item.status,item.write_off,item.call_using_url,item.call_used_url)">{{ item.status == 1 ? "待支付" : item.status == 2 ? item.write_off ?  item.call_used : item.call_using : "已取消" }}</van-button>
              <van-button class="close-btn" type="default" @click="revokeorder(item.order_no)">取消预约</van-button>
            </div>
            <div class="action" v-else-if="item.status === 1"><!-- 待支付 -->>
              <div class="action-line"></div>
              <van-button class="pay-btn" type="success" @click="orderDo(item.order_no,item.status,item.write_off,item.call_using_url,item.call_used_url)">{{ item.status == 1 ? "待支付" : item.status == 2 ? item.write_off ?  item.call_used : item.call_using : "已取消" }}</van-button>
              <van-button class="close-btn" type="default" @click="revokeorder(item.order_no)">取消预约</van-button>
            </div>
            <div class="action" v-else-if="item.status === 2">
              <div class="action-line"></div>
              <van-button class="comment-btn" type="default" @click="orderDo(item.order_no,item.status,item.write_off,item.call_using_url,item.call_used_url,item.product_from)">{{ item.status == 1 ? "待支付" : item.status == 2 ? item.write_off ?  item.call_used : item.call_using : "已取消" }}</van-button>
            </div>
          </div>
        </div>
      </div>
      <p class="no-more">暂无更多预约~</p>
      <div class="end"></div>
    </div>

    <van-popup v-model="closeAlert">
      <div class="close-alert">
        <p class="close-title">取消预约</p>
        <p class="close-detail">
          如预约产品服务后需取消预约，请通过利佳健康平台进行操作或拨打客服热线通知利佳。在利佳确认您预约成功之前，您可免费取消本次服务。在利佳确认您预约成功之后，您有可能无法获得全额退款，详情可阅读
          <a
            href="a"
          >****协议</a>。如若您多次未赴约，我们会将此视为恶意行为，这将会影响您在利佳网及利佳合作机构所享受的奖励与权限。
        </p>
        <p class="close-sure">您确定要取消预约吗？</p>
        <div class="close-action">
          <van-button class="goback-btn" type="default" @click="cancelClose">返回</van-button>
          <van-button class="close-submit-btn" type="default" @click="revokeorder(item.order_no)">取消预约</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>


<script>
import NavTop from "@/components/nav/navBar";
import { allorder,revokeorder } from "./../../libs/api_v1"
import axios from 'axios'
import { domain } from '../../libs/api';

export default {
  components: {
    NavTop,
  },
  name: "Appointments",
  data() {
    return {
      atviveIndex: 0,
      tabs: [
        { name: "全部", statusIndex: 0, icon: "" },
        {
          name: "已提交",
          statusIndex: 1,
          icon: "/static/icon/appointment/status-submitted.png"
        },
        {
          name: "预约成功",
          statusIndex: 2,
          icon: "/static/icon/appointment/status-succeeded.png"
        },
        {
          name: "预约失败",
          statusIndex: 3,
          icon: "/static/icon/appointment/status-failed.png"
        },
        {
          name: "未付款",
          statusIndex: 4,
          icon: "/static/icon/appointment/status-nopay.png"
        },
        {
          name: "已取消",
          statusIndex: 5,
          icon: "/static/icon/appointment/status-closed.png"
        },
        {
          name: "已完成",
          statusIndex: 6,
          icon: "/static/icon/appointment/status-completed.png"
        }
      ],
      appointments: {
        count: 6,

      },
      closeAlert: false,
      orderList:[

      ]
    };
  },
  created: function(){
    allorder()
    .then((resp)=>{
      var res = resp.data
      if(res.code==1){
          this.orderList = res.data
      }else{
        // this.$notify({ type: 'danger', message: res.msg });
      }
    })
    .catch((err)=>{
      // this.$notify({ type: 'danger', message: err });
    })
  },
  methods: {
    orderinfo:function(order_no){
      window.location.href = '/order/detail?order_no='+order_no
    },
    revokeorder: function(order_no){
      revokeorder(order_no)// revokeorder
      .then((resp)=>{
        var res = resp.data
        console.log(res)
        if(res.code==1){
          // this.$options.created()
          window.location.reload()
          this.$notify({ type: 'success', message: res.msg });
        }else{
          if(res.result.errcode=2001){
              window.location.href = {path:'/auth/login'}
          }
          this.$notify({ type: 'danger', message: "订单已被取消" });
        }
      })
      axios
    },
    orderDo:function(order_no,status,write_off,call_using_url,call_used_url,product_from){ // 订单按钮动作
      if(status == 1){ // 待支付
        if(product_from =="member"){
          window.location.href = domain+"/pay/mainland?order_no="+order_no+"&calluri="+call_using_url
        }else{
          window.location.href = domain+"/pay/allin?order_no="+order_no+"&calluri="+call_using_url
        }
      }
      if(status == 2){ // 已支付
          if(write_off){
              window.location.href = call_used_url+"?order_no="+order_no
          }else{
              window.location.href = call_using_url+"?order_no="+order_no
          }
      }
      if(status == 3){ // 已取消
          // alert("订单已被取消")
          this.$notify({ type: 'danger', message: "订单已被取消" });
      }
    },
    changeTab(tabIndex) {
      this.atviveIndex = tabIndex;
    },
    getStatusImg(statusIndex) {
      for (var item of this.tabs)
        if (statusIndex === item.statusIndex) return item.icon;
    },
    close(id) {
      this.closeAlert = true;
    },
    cancelClose() {
      this.closeAlert = false;
    }
  }
};
</script>

<style lang='scss' scoped>
.appointments {
  padding-bottom: 60px;
  .top-tag {
    padding-top: 48px;
    border-bottom: 2px solid #f5f5f5;
    ul {
      width: 100%;
      height: 34px;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      li {
        flex: 1;
        text-align: center;
        background-color: #f5f5f5;
        color: #666;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 1em;
        padding: 5px 9px;
        margin-left: 10px;
      }
      li:last-child {
        border-right: 10px solid #fff;
      }
      .li-active {
        background-color: #06a44f;
        color: #ffffff;
      }
    }
    ul::-webkit-scrollbar {
      display: none;
    }
  }
  .appointments-empty {
    width: 320px;
    height: 281px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
  .appointment-list {
    margin-top: 60px;
    .appointmnet-item {
      .update-time {
        margin: 8px auto;
        font-size: 12px;
        background-color: #d8d8d8;
        color: #ffffff;
        width: 81px;
        padding: 4px 0;
        text-align: center;
        font-family: Microsoft YaHei;
        border-radius: 5px;
      }
      .item-info {
        margin: 6px auto 0 auto;
        width: 304px;
        border: 2px solid #f4f4f4;
        border-radius: 8px;
        p {
          margin: 0;
          line-height: 1em;
          font-family: Microsoft YaHei;
        }
        span {
          line-height: 1em;
          font-family: Microsoft YaHei;
        }
        .product-img {
          float: left;
          width: 76px;
          height: 76px;
          margin-top: 15px;
          margin-left: 14px;
        }
        .product-info {
          width: 117px;
          float: left;
          margin-left: 14px;
          .product-name {
            font-weight: bold;
            font-size: 12px;
            color: #000000;
            margin-top: 18px;
            line-height: 1.2em;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
          }
          .product-sum {
            font-weight: bold;
            font-size: 0px;
            color: #666666;
            margin-top: 8px;
            span {
              font-size: 11px;
            }
          }
          .appointment-time {
            font-size: 9px;
            color: #8d8d8d;
            margin-top: 20px;
            font-weight: bold;
          }
        }
        .status-icon {
          float: right;
          width: 56px;
          height: 43px;
          margin-top: 14px;
          margin-right: 10px;
        }
        .order-number,
        .pay-sum {
          font-size: 0;
          .label {
            margin-left: 14px;
            color: #4e4e4e;
            font-size: 10px;
            font-weight: bold;
          }
          .value {
            font-weight: bold;
          }
        }
        .order-number {
          padding-top: 4px;
          .value {
            color: #8d8d8d;
            font-size: 9px;
          }
        }
        .pay-sum {
          padding-top: 12px;
          padding-bottom: 8px;
          .value {
            color: #1ba253;
            font-size: 10px;
          }
        }
        .action {
          font-size: 0px;
          display: flex;
          .action-line {
            margin: 0 0px;
            height: 1px;
            background-color: #f5f5f5;
          }
          .change-btn,
          .close-btn,
          .pay-btn,
          .comment-btn {
            border: none;
            width: 152px;
            height: 38px;
            font-size: 12px;
            color: #666666;
            margin-bottom: 1px;
          }
          .comment-btn,
          .close-btn {
            color: #06a44f;
          }
          .comment-btn {
            width: 304px;
          }
          .close-btn {
            border-left: 1px solid #f5f5f5;
            width: 151px;
          }
        }
      }
    }
    .no-more {
      text-align: center;
      color: #4c4c4c;
      font-size: 12px;
      margin: 0;
      padding-top: 15px;
      line-height: 1em;
    }
  }
  .van-popup {
    background-color: rgba(0, 0, 0, 0);
    overflow: -webkit-paged-x;
  }
  .close-alert {
    width: 249px;
    border-radius: 10px;
    background-color: white;
    font-size: 0px;
    p {
      margin: 0;
    }
    .close-title {
      padding-top: 17px;
      font-size: 13px;
      color: #000000;
      font-weight: bold;
      line-height: 1em;
      text-align: center;
    }
    .close-detail {
      padding-top: 20px;
      padding-left: 23px;
      width: 200px;
      font-size: 11px;
      color: #666666;
      line-height: 1.3em;
    }
    .close-sure {
      padding: 30px 0 10px 23px;
      font-size: 11px;
      color: #fb7940;
      line-height: 1em;
    }
    .close-action {
      border-top: 1px solid #f5f5f5;
      .goback-btn,
      .close-submit-btn {
        border: none;
        width: 124px;
        height: 38px;
        font-size: 13px;
        color: #666666;
        margin-bottom: 1px;
      }
      .close-submit-btn {
        border-left: 1px solid #f5f5f5;
        color: #06a44f;
        border-bottom-right-radius: 10px;
      }
      .goback-btn {
        border-bottom-left-radius: 10px;
      }
    }
  }
}
</style>
<!--
        list: [
          {
            id: "1",
            status: 5,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          },
          {
            id: "2",
            status: 6,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          },
          {
            id: "3",
            status: 3,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          },
          {
            id: "4",
            status: 1,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          },
          {
            id: "5",
            status: 2,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          },
          {
            id: "6",
            status: 4,
            updateTime: "2019-08-20",
            img: "/static/img/product-img.png",
            name: "PCL max 少女线（PCL max 少女线）",
            sum: "26400",
            appointmentsTime: "2019-09-06 08:00 星期五",
            orderNum: "190904095158892",
            pay: "26400.00"
          }
        ]
 -- >